<template>
  <div class="six">
    <div class="warning-title">内部管理</div>
    <div class="flex justify-between px-3">
      <div id="warning-chart02"></div>
      <div class="mt-2">
        <div class="flex align-center justify-center colorccc font16">
          部门人员总数
        </div>
        <div
          class="flex align-center my-1 justify-center text-main font26 font-weight-500"
        >
          180人
        </div>
        <div class="data-box flex justify-between px-2 align-center">
          <div>
            <img src="../../../assets/img/warning/icon05.png" alt="" />
            <div class="color14 colorccc my-1">第一</div>
            <div class="color14 font-weight-bold" style="color:#00E4FF">14人</div>
          </div>
          <div>
            <img src="../../../assets/img/warning/icon06.png" alt="" />
            <div class="color14 colorccc my-1">第二</div>
            <div class="color14 font-weight-bold" style="color:#FF8A36">12人</div>
          </div>
          <div>
            <img src="../../../assets/img/warning/icon07.png" alt="" />
            <div class="color14 colorccc my-1">第三</div>
            <div class="color14 font-weight-bold" style="color:#EC3B82">2人</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
var echarts = require("echarts");
export default {
  name: "waringSix",
  data() {
    return {};
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      var drawCharts = document.getElementById("warning-chart02"); // 对应地使用ByClassName
      var drawChart = echarts.init(drawCharts);
      let dashedPic =
        "";
      let color = ["#00E4FF", "#FF8A36", "#EC3B82"];
      let chartData = [
        {
          name: "所有人员",
          value: 180,
          unit: "人",
        },
        {
          name: "稽查队长",
          value: 120,
          unit: "人",
        },
        {
          name: "队员",
          value: 20,
          unit: "人",
        },
      ];
      let arrName = [];
      let arrValue = [];
      let sum = 0;
      let pieSeries = [],
        lineYAxis = [];

      // 数据处理
      chartData.forEach((v, i) => {
        arrName.push(v.name);
        arrValue.push(v.value);
        sum = sum + v.value;
      });

      // 图表option整理
      chartData.forEach((v, i) => {
        pieSeries.push({
          name: "学历",
          type: "pie",
          clockWise: false,
          hoverAnimation: false,
          radius: [65 - i * 15 + "%", 57 - i * 15 + "%"],
          center: ["30%", "50%"],
          label: {
            show: false,
          },
          data: [
            {
              value: v.value,
              name: v.name,
            },
            {
              value: sum - v.value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
            },
          ],
        });
        pieSeries.push({
          name: "",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [65 - i * 15 + "%", 57 - i * 15 + "%"],
          center: ["30%", "50%"],
          label: {
            show: false,
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: "rgba(51, 122, 252, .2)",
              },
            },
            {
              value: 2.5,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
            },
          ],
        });
        v.percent = ((v.value / sum) * 100).toFixed(1) + "%";
        lineYAxis.push({
          value: i,
          textStyle: {
            rich: {
              circle: {
                color: color[i],
                padding: [0, 5],
              },
            },
          },
        });
      });

      var option = {
        color: color,
        grid: {
          top: "15%",
          bottom: "54%",
          left: "30%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: function (params) {
                let item = chartData[params];
                console.log(item);
                return (
                  "{line|}{circle|●}{name|" +
                  item.name +
                  "}{value|" +
                  item.value +
                  "}{unit|人}"
                );
              },
              interval: 0,
              inside: true,
              textStyle: {
                color: "#333",
                fontSize: 12,
                rich: {
                  name: {
                    color: "#ccc",
                    fontSize: 12,
                  },
                  bd: {
                    color: "#ccc",
                    padding: [0, 5],
                    fontSize: 12,
                  },
                  percent: {
                    color: "#ccc",
                    fontSize: 12,
                  },
                  value: {
                    color: "#ccc",
                    fontSize: 12,
                    padding: [0, 0, 0, 10],
                  },
                  unit: {
                    fontSize: 12,
                    color: "#ccc",
                  },
                },
              },
              show: true,
            },
            data: lineYAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: pieSeries,
      };
      drawChart.setOption(option);
    },
  },
};
</script>
<style lang="stylus" scoped>
.text-main {
  color: #007FFE;
}

.data-box {
  width: 272px;
  height: 111px;
  background: url('../../../assets/img/warning/icon04.png') no-repeat;

  img {
    width: 30px;
    height: 30px;
  }
}

.six {
  width: 608px;
  height: 270px;
  background: url('../../../assets/img/warning/bg05.png') no-repeat;
  background-size: 608px 270px;
  margin-top: 25px;
}

#warning-chart02 {
  width: 260px;
  height: 220px;
}
</style>